<template>
  <div class="UserComments">
    <shop-header> 我的关注 </shop-header>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      :immediate-check="false"
    >
      <div class="comment" v-for="item in info" :key="item.id">
        <div class="date">
          {{ item.create_date | date("YYYY-MM-DD hh-mm") }}
        </div>
        <div class="parents" v-if="item.parent">
          <div class="ask">回复:{{ item.parent.user.nickname }}</div>
          <div class="answer">{{ item.parent.content }}</div>
        </div>
        <div class="connent">{{ item.content }}</div>
        <div class="title">{{ item.post.title }}</div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      loading: false,
      finished: false,
      pageIndex: 0,
    };
  },
  async created() {
    this.getinfo();
  },
  methods: {
    async getinfo() {
      this.pageIndex++;
      const pageSize = 5;
      const res = await this.$axios.get("/user_comments", {
        params: {
          pageIndex: this.pageIndex,
          pageSize: 5,
        },
      });
      this.loading = false;
      if (res.data.data.length < 5) {
        this.finished = true;
      }
      this.info = [...this.info, ...res.data.data];
      console.log(res.data.data);
    },
    onLoad() {
      this.getinfo();
    },
  },
};
</script>

<style scoped lang='less'>
.UserComments {
  .comment {
    padding: 10px;
    .date {
      opacity: 0.4;
      font-size: 10px;
    }
    .parents {
      height: 40px;
      background-color: #999999;
      opacity: 0.5;
      padding: 10px;
      .ask {
        font-size: 10px;
      }
      .answer {
        font-size: 20px;
      }
    }
    .connent {
      font-size: 20px;
    }
    .title {
      font-size: 10px;
      opacity: 0.5;
    }
  }
}
</style>